<link rel="import" href="../../html/polymer.html">

<link rel="import" href="../../html/cr/ui/focus_without_ink.html">
<link rel="import" href="../cr_actionable_row_style.html">
<link rel="import" href="../cr_icon_button/cr_icon_button.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../shared_vars_css.html">

<dom-module id="cr-expand-button">
  <template>
    <style include="cr-actionable-row-style">
      :host([disabled]) {
        opacity: 0.65;
        pointer-events: none;
      }

      :host([disabled]) cr-icon-button {
        display: var(--cr-expand-button-disabled-display, initial);
      }

      #label {
        flex: 1;
        padding: var(--cr-section-vertical-padding) 0;
      }

      cr-icon-button {
        --cr-icon-button-icon-size: var(--cr-expand-button-icon-size, 20px);
        --cr-icon-button-size: var(--cr-expand-button-size, 36px);
      }
    </style>

    <div id="label" aria-hidden="true"><slot></slot></div>
    <cr-icon-button id="icon" aria-labelledby="label" disabled="[[disabled]]"
        tabindex="[[tabIndex]]"></cr-icon-button>
  </template>
  <script src="cr_expand_button.js"></script>
</dom-module>
